
<template>
	<view class="content">
		<view class="status_bar"></view>
		<view class="cc" @click="memberFn()">
			<image class="image" :src="userInfo.avatar||'https://www.soccerpet.com/static/img/default_photo.png'"></image>
			<view class="cc-center">
				<view v-if="userInfo">{{userInfo.nickname}}</view>
				<view>Diamond：{{userInfo.balance||0}}</view>
			</view>
			<view class="btn">Pay</view>
		</view>
		<!-- <view class="item" @click="navigatorTo('/pages/tabBar/myUser/myProfile')">
			<u-icon name="account-fill" color="#fff" :size="20"></u-icon>
			<view class="text">我的资料</view>
		</view>
		<view class="item" @click="navigatorTo('/pages/coupon/coupon')">
			<u-icon name="coupon" color="#fff" :size="20"></u-icon>
			<view class="text">优惠券</view>
		</view> -->
		<view class="item" @click="navigatorTo('/pages/prediction/prediction','h5')">
			<u-icon name="thumb-up" color="#fff" :size="20"></u-icon>
			<view class="text">{{$t('yuce.canjiayuce')}}</view>
		</view>
		<view class="item" @click="goUrl(`/pages/myPrediction/myPrediction?uid=${userInfo.id}&matchType=1`,'h5')">
			<u-icon name="thumb-up-fill" color="#fff" :size="20"></u-icon>
			<view class="text">{{$t('yuce.wodeyuce')}}</view>
		</view>
		<view class="item" @click="navigatorTo('/pages/attention/attention','h5')">
			<u-icon name="plus-people-fill" color="#fff" :size="20"></u-icon>
			<view class="text">{{$t('yuce.wodeguanzhu')}}</view>
		</view>
		<view class="item" @click="navigatorTo('/pages/forecastOrders/forecastOrders','h5')">
			<u-icon name="list" color="#fff" :size="20"></u-icon>
			<view class="text">{{$t('yuce.yucedingdan')}}</view>
		</view>
		<navigator url="/pages/userAgreement/userAgreement?text=隐私策略&type=2">
			<view class="item">
				<u-icon name="order" color="#fff" :size="20"></u-icon>
				<view class="text">{{$t('yuce.yinsicelue')}}</view>
			</view>
		</navigator>
		<navigator url="/pages/userAgreement/userAgreement?text=关于我们&type=3">
			<view class="item">
				<u-icon name="man-add-fill" color="#fff" :size="20"></u-icon>
				<view class="text">{{$t('yuce.guanyuwomeng')}}</view>
			</view>
		</navigator>
		<view class="item" @click="shareFn">
			<u-icon name="share" color="#fff" :size="20"></u-icon>
			<view class="text">{{$t('yuce.fenxiang')}}</view>
		</view>
		<view class="item" @click="signOut">
			<u-icon name="share-square" color="#fff" :size="20"></u-icon>
			<view class="text">{{$t('yuce.tuichudenglu')}}</view>
		</view>
		<!-- <view class="item" @click="googleRecharge">
			<u-icon name="share-square" color="#fff" :size="20"></u-icon>
			<view class="text">测试支付</view>
		</view> -->
		<!-- <view class="item" @click="setClipboardData">
			<u-icon name="share-square" color="#fff" :size="20"></u-icon>
			<view class="text">分享我们</view>
		</view>
		<view class="item" @click="navigatorTo('/pages/turntable/turntable')">
			<u-icon name="list" color="#fff" :size="20"></u-icon>
			<view class="text">每日幸运大转盘</view>
		</view> -->
		<!-- 下载 -->
		<!-- #ifdef H5 -->
		<u-popup :show="download.show" mode="bottom" round="14" @close="download.show=false">
			<view class="lzpopup">
				<image style="width: 50px;height: 50px;margin:10px auto;" src="@/static/image/index/h5Logo.png"></image>
				<view style="color: #fff;">OlaScore Is Better on our App</view>
				<view style="color: #b8b8b8;text-align: center;">Live score updates for all matches and free live streaming of matches</view>
				<view class="btns">
					<view class="btn1" @click="download.show=false">Not now</view>
					<view class="btn1 btn2" @click="downloadFn">Download</view>
				</view>
			</view>
		</u-popup>
		<!-- #endif-->
	</view>
</template>
<script>
	var googlePay = uni.requireNativePlugin('sn-googlepay5');
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['userInfo', 'api','userToken']),
		},
		data() {
			return {
				isConnected:false,
				download:{
					show:false
				}
			}
		},
		onLoad() {
			if(this.userToken&&this.userInfo){
				// this.refreshToken()
				this.getUserInfo()
			}else{
				console.log(this.userToken);
			}
			// 初始化支付配置
			googlePay.init({}, (e) => {
				console.log('init', e);
				if (e.code == 0) {
					this.isConnected = true;
					// 初始化成功
				} else {
					// 初始化失败
					this.isConnected = false;
				}
			});
		},
		onPullDownRefresh() {
			this.getUserInfo()
		},
		methods:{
			...mapActions(['set_userInfo','set_userToken','remove_logout']),
			//下载
			downloadFn(){
				window.location.href="https://img1.zhibo06.com/download/mixfootball.apk"
				this.download.show=false
			},
			//
			googleRecharge(){
				let params = {
					productId:'d_120'
				}
				uni.$u.http.post(this.api.api_v1_order_googleRecharge, params).then(res => {
					console.log(res);
					if (res.code == 200 && res.data) {
						this.payInApp(res.data.tradeNo)
					}
				})
			},
			// 内购
			payInApp(tradeNo) {
				if (this.isConnected == false) {
					uni.showToast({
						title: '请先init，保证服务连接成功',
						icon:"none"
					});
					return;
				}
				var pId = 'd_120';
				// 步骤一：查询sku
				googlePay.querySku({
						inapp: [pId]
					},
					(e) => {
						if (e.code == 0) {
							console.log('querySku', e.list);
							if (e.list.length > 0) {
								var pd = e.list[0];
								console.log('tradeNo',tradeNo);
								// 步骤二：支付
								googlePay.payAll({
										productId: pId ,// 产品id
										accountId: tradeNo, // 用户Id，可选参数
									},
									(e) => {
										console.log('pay result', e);
										// 步骤三：确认订单
										googlePay.consume({
												purchaseToken: e.data[0].original.purchaseToken
											},
											(e) => {
												console.log('consume result', e);
											}
										);
										if (e.code == 0) {
										    // 支付成功
											let params = {
												originalJson:JSON.stringify(e.data[0].original),
												signature:e.data[0].signature
											}
											uni.$u.http.post(this.api.api_v1_order_googleNotify, params).then(res => {
												if (res.code == 200) {
													uni.showToast({
														title: 'Success',
														icon:"none"
													});
												}
											})
											
										} else {
											// 支付失败
											uni.setClipboardData({
												data: JSON.stringify(e),
												success: function () {
													uni.showToast({
														title: '支付失败，已复制直接粘贴',
														icon:"none"
													});
												}
											});
										}
									}
								);
							} else {
								uni.showToast({
									title: '未查询到产品',
									icon:"none"
								});
							}
						} else {
							// 查询失败
							console.log('querySku fail', e);
							uni.showToast({
								title: '查询失败',
								icon:"none"
							});
						}
					}
				);
			},
			//分享
			shareFn(){
				// #ifdef H5
					uni.setClipboardData({
						data: 'https://m.olascore.com/',
						success: function () {
							uni.showToast({
								title: '复制链接成功，请分享',
								icon:"none"
							});
						}
					});
				// #endif
				// #ifndef H5
					plus.share.sendWithSystem({type:'text',href:'https://m.olascore.com/'}, function(){
						console.log('分享成功');
					}, function(e){
						console.log('分享失败：'+JSON.stringify(e));
					});
				// #endif
				
			},
			signOut(){
				this.remove_logout()
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			//获取用户信息
			getUserInfo(){
				let params={
					clientType:2
				}
				uni.$u.http.post(this.api.api_v1_user_getInfo, params).then(res => {
					if(res.code==200&&res.data){
						this.set_userInfo(res.data)
					}
					uni.stopPullDownRefresh();
				}).catch(err=>{
					console.log(err);
					uni.stopPullDownRefresh();
				})
			},
			//刷新token
			refreshToken(){
				let params={
				}
				uni.$u.http.post(this.api.api_v1_refreshToken, params).then(res => {
					if(res.code==200&&res.data){
						this.set_userToken(res.data.accessToken)
					}
				})
			},
			navigatorTo(url,type){
				// #ifdef H5
				if(type=='h5'){
					this.download.show=true
					return
				}
				// #endif
				
				
				uni.navigateTo({
					url: url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			goUrl(url,type){
				// #ifdef H5
				if(type=='h5'){
					this.download.show=true
					return
				}
				// #endif
				if(this.userInfo&&this.userToken){
					uni.navigateTo({
						url: url,
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}else{
					uni.navigateTo({
						url: '/pages/login/login',
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				}
				
			},
			//分享我们
			setClipboardData(){
				uni.setClipboardData({
					data: 'http://m.tthd666.com',
					success: function () {
						uni.showToast({
							title: '复制链接成功，请分享',
							icon:"none"
						});
					}
				});
			},
			// 会员充值
			memberFn(){
				// #ifdef H5
				this.download.show=true
				return
				// #endif
				uni.navigateTo({
					url: '/pages/recharge/recharge',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
			
		}
		
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-popup__content{
		background-color: #1b2a4d;
	}
	.lzpopup{
		display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;line-height: 26px;
		.btns{
			display: flex;justify-content: space-around;width: 100%;margin: 10px 0;
			.btn1{
				border: 1px solid #fff;color: #fff;width:300rpx;height:35px;text-align: center;line-height: 35px;border-radius: 5px;
			}
			.btn2{
				background-color: #FF6B00;color: #000;border-color: transparent;
			}
		}
	}
	.content{
		padding: 5px 10px;box-sizing: border-box;color: #fff;
		.cc{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;align-items: center;
			.image{
				width:50px;height: 50px;border-radius: 50%;margin-right: 10px;
			}
			.cc-center{
				flex: 1;
			}
			.btn{
				padding: 5px 10px;background-color: #f56c6c;color: #fff;font-size: 12px;border-radius: 5px;
			}
		}
		.item{
			width: 100%;background-color: #242448;padding: 10px;box-sizing: border-box;border-radius: 5px;
			display: flex;align-items: center;margin-top: 10px;
			.text{
				margin-left: 10px;
			}
		}
	}
</style>
